<template>
  <div class="app-container">
    <el-alert
      title="https://gitcode.com/gh_mirrors/vu/vue-org-tree/overview"
      type="success" />
    <div style="margin-left:30px;">
      <el-row :gutter="20">
        <el-col :span="5">
          <el-switch v-model="horizontal" :width="50" active-text="横排" inactive-text="竖排" style="margin-top:8px;" />
        </el-col>
        <el-col :span="5">
          <el-switch
            v-model="expandAll"
            :width="50"
            active-text="全部展开"
            inactive-text="全部折叠"
            style="margin:8px;"
            @change="expandChange" />
        </el-col>
        <el-col :span="14">
          <span style="font-size:14px;font-weight:500;">选择背景色:</span>
          <el-select v-model="labelClassName" @change="selectChange">
            <el-option value="bg-white" label="白色">白色</el-option>
            <el-option value="bg-orange" label="橘黄色">橘黄色</el-option>
            <el-option value="bg-gold" label="金色">金色</el-option>
            <el-option value="bg-gray" label="灰色">灰色</el-option>
            <el-option value="bg-lightpink" label="浅粉色">浅粉色</el-option>
            <el-option value="bg-chocolate" label="巧克力色">巧克力色</el-option>
            <el-option value="bg-tomato" label="番茄色">番茄色</el-option>
          </el-select>
        </el-col>
      </el-row>
    </div>
    <div style="font-size:12px;margin-top:30px;">
      <el-scrollbar :style="scrollTreeStyle" class="el-org-tree">
        <vue2-org-tree
          :data="treeData.data"
          :prop="{label: 'organizationName', children: 'children', expand: 'expand'}"
          :horizontal="!horizontal"
          :collapsable="collapsable"
          :label-class-name="labelClassName"
          :render-content="renderContent"
          name="organ"
          @on-expand="onExpand"
          @on-node-click="onNodeClick" />
      </el-scrollbar>
    </div>
    <br><br>
  </div>
</template>

<script>
export default {
  data() {
    return {
      treeData: {
        labelClassName: 'bg-color-orange',
        basicInfo: { id: null, label: '---null' },
        basicSwitch: true,
        data: {
          id: 0,
          organizationName: 'Chiship网络工作室'
        }
      },
      horizontal: true, // 横版 竖版
      collapsable: false,
      expandAll: true, // 是否全部展开
      labelClassName: '白色', // 默认颜色
      scrollTreeStyle: 'width:100%;'
    }
  },
  created() {
    this.getList()
  },
  methods: {
    // 渲染节点
    renderContent(h, data) {
      return (
        <el-dropdown>
          <span class='el-dropdown-link'>
            {data.organizationName}<i class='el-icon-arrow-down el-icon--right'></i>
          </span>
          <el-dropdown-menu slot='dropdown'>
            <el-dropdown-item v-show={data.id !== -1}>
              <el-link underline={false} onclick={() => this.onClick('add', data)}>
                添加同级部门
              </el-link>
            </el-dropdown-item>
            <el-dropdown-item>
              <el-link underline={false} onclick={() => this.onClick('addChild', data)}>
                添加下级部门
              </el-link>
            </el-dropdown-item>
            <el-dropdown-item>
              <el-link underline={false} onclick={() => this.onClick('edit', data)}>
                修改部门
              </el-link>
            </el-dropdown-item>
            <el-dropdown-item >
              <el-link underline={false} onclick={() => this.onClick('del', data)}>
                删除部门
              </el-link>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      )
    },

    // 鼠标移出
    onMouseout(e, data) {
      this.treeData.basicSwitch = false
    },
    // 鼠标移入
    onMouseover(e, data) {
      this.treeData.basicInfo = data
      this.treeData.basicSwitch = true
      var floating = document.getElementsByClassName('floating')[0]
      floating.style.left = e.clientX + 'px'
      floating.style.top = e.clientY + 'px'
    },
    // 点击节点
    NodeClick(e, data) {
      console.log(e, data)
    },
    // 默认展开
    toggleExpand(data, val) {
      if (Array.isArray(data)) {
        data.forEach(item => {
          this.$set(item, 'expand', val)
          if (item.children) {
            this.toggleExpand(item.children, val)
          }
        })
      } else {
        this.$set(data, 'expand', val)
        if (data.children) {
          this.toggleExpand(data.children, val)
        }
      }
    },
    collapse(list) {
      list.forEach(child => {
        if (child.expand) {
          child.expand = false
        }
        child.children && this.collapse(child.children)
      })
    },
    // 展开
    onExpand(e, data) {
      if ('expand' in data) {
        data.expand = !data.expand
        if (!data.expand && data.children) {
          this.collapse(data.children)
        }
      } else {
        this.$set(data, 'expand', true)
      }
    },
    getList() {
      // 后台回去的数据 赋值给data即可
      this.$store.dispatch('loadOrganizationTree', {
        pid: '0',
        category: '01'
      }).then(res => {
        console.log(res)
        this.treeData.data = {
          id: -1,
          organizationName: 'Chiship●JAVA快速开发平台',
          children: res
        }
      })
    },

    // 自定义您的点击事件
    onNodeClick(e, data) {
      console.log(e, data)
    },

    expandChange() {
      this.collapsable = true
      this.toggleExpand(this.treeData.data, this.expandAll)
    },
    selectChange() {

    },
    onClick(key, node) {
      console.log(key)
      if (key === 'del') {
        if (node.children && node.children.length > 0) {
          this.$message.error('当前部门存在子部门，请先删除子部门')
        } else {
          this.$message.info('走删除相关逻辑')
        }
      } else {
        // this.$refs.modifyDept.showModal(keyObj.key, node)
      }
    }

  }

}
</script>
<style lang="scss">
.bg-white {
  background-color: white;
}
.bg-orange {
  background-color: orange;
}
.bg-gold {
  background-color: gold;
}
.bg-gray {
  background-color: gray;
}
.bg-lightpink {
  background-color: lightpink;
}
.bg-chocolate {
  background-color: chocolate;
}
.bg-tomato {
  background-color: tomato;
}
//.org-tree-node-label-inner {
//  color: #fff;
//  background-color: orange;
//}

.el-org-tree {
  .el-scrollbar__wrap {
    overflow-x: hidden;
  }
  .org-tree-node-label {
    white-space: nowrap;
  }
  .el-tree-node__content{
    background: white;
  }
  .org-tree-node-label .org-tree-node-label-inner {
    padding-top: 8px;
    padding-right: 10px;
    padding-bottom: 5px;
    padding-left: 10px;
    cursor: pointer;
  }
  .horizontal .org-tree-node.is-leaf {
    padding-top: 5px;
    padding-bottom: 5px;
  }
}
</style>
